<script setup>
import CustomStep from '@/components/customStep';
import { getCurrentInstance, ref } from 'vue';
import FormatLayout from '@/components/formatLayout';
import { useUploadFile } from '@/mixins/uploadFile.js';
import { getTplByTagAndName } from '@/api/tpl.js';
import FormatPreview from '@/components/formatPreview/formatPreview.vue';

const instance = getCurrentInstance();
const { $message } = instance.appContext.config.globalProperties;
// 步骤条交互
const stepData = [
  { label: '上传文档', value: '1' },
  { label: '选择学校', value: '2' },
  { label: '生成格式', value: '3' },
];
const {
  activeLine,
  activeStep,
  fileName,
  uploadSuccess,
  wordUpload,
  cleanWord,
  showPreviewDialog,
  previewData,
  previewClick,
  formatHandle,
  lookHandle,
  uploadJumpHandle,
  goLastStep,
} = useUploadFile();

// 第一步选择学校按钮点击
async function chooseSchool() {
  await searchSchool();
  activeStep.value = 1;
  activeLine.value = 0;
}

/**
 * @desc 第二步选择学校
 */
const schoolName = ref('');
const moduleTypeOption = [
  { label: '博士研究生', value: 'bslw' },
  { label: '硕士研究生', value: 'sslw' },
  { label: '本科论文', value: 'bklw' },
];
const moduleActive = ref('bslw'); // 设置激活的模块
const moduleList = ref([]); // 模版列表
const showEmptyHint = ref(false); // 学校模版为空时展示提示语
//查询学校
async function searchSchool() {
  const returnData = await getTplByTagAndName({
    tag: '学校',
    content: schoolName.value,
    code: moduleActive.value,
  });
  if (returnData?.code === 200) {
    moduleList.value = returnData.data;
    moduleList.value.forEach((item) => {
      item.showMask = false; // 初始化遮罩层
    });
    showEmptyHint.value = moduleList.value.length === 0;
  } else {
    $message.error(returnData?.msg);
  }
}
// 模板类型点击
function modeTypeClick(value) {
  moduleActive.value = value;
  searchSchool();
}
</script>

<template>
  <FormatLayout title="学位论文排版" class="format-paper-box">
    <template #leftContent>
      <div class="go-back-btn" @click="goLastStep" v-show="activeStep === 1">返回上一步</div>
    </template>
    <div class="step-box">
      <CustomStep :active-step="activeStep" :step-data="stepData" :active-line="activeLine" />
    </div>
    <!--上传文件-->
    <template v-if="activeStep === 0">
      <div class="first-step">
        <el-upload
          accept=".doc, .docx"
          :http-request="wordUpload"
          :show-file-list="false"
          :limit="1"
          drag
          class="img-upload"
        >
          <img class="upload-icon" src="@/assets/images/formatPaper/upload-icon.png" alt="" />
        </el-upload>
        <template v-if="!uploadSuccess">
          <div class="hint-box">提示：目前只支持word文档上传，大小不超过5M</div>
          <el-upload
            accept=".doc, .docx"
            :http-request="wordUpload"
            :show-file-list="false"
            :limit="1"
          >
            <div class="upload-btn">立即上传</div>
          </el-upload>
        </template>
        <template v-else>
          <div class="file-list">
            <div class="upload-success-box">
              <el-icon><CircleCheckFilled /></el-icon><span>上传成功</span>
            </div>
            <div class="file-name-box" v-show="fileName !== ''">
              <div class="file-name">{{ fileName }}</div>
              <div class="close-icon-box">
                <el-icon @click="cleanWord"><CircleCloseFilled /> </el-icon>
              </div>
            </div>
            <div class="choose-school" @click="chooseSchool">选择学校</div>
          </div>
        </template>
      </div>
    </template>
    <!--选择学校-->
    <template v-else-if="activeStep === 1">
      <el-input placeholder="请输入目标学校名称" v-model="schoolName" class="school-input">
        <template #append>
          <el-button type="primary" class="school-sure" @click="searchSchool">确定</el-button>
        </template>
      </el-input>
      <div class="module-type-box">
        <div class="head-title">模版类别</div>
        <div class="module-select-box">
          <template v-for="item in moduleTypeOption" :key="item.value">
            <div
              class="each-module"
              :class="{ 'active-module': item.value === moduleActive }"
              @click="modeTypeClick(item.value)"
            >
              {{ item.label }}
            </div>
          </template>
        </div>
      </div>
      <div class="empty-hint" v-show="showEmptyHint">
        暂未检测到{{ schoolName || '当前类型' }}模版，
        <span @click="uploadJumpHandle">请上传</span>
        ，或到个人中心进行上传
      </div>
      <div class="module-list-box" v-show="!showEmptyHint">
        <template v-for="(item, index) in moduleList" :key="index">
          <div class="each-module">
            <div
              class="img-box"
              @mouseenter="item.showMask = true"
              @mouseleave="item.showMask = false"
            >
              <img :src="item.qkLwImage" alt="" />
              <div class="mack-box" v-show="item.showMask">
                <div class="format-set set-box" @click="formatHandle(item)">格式生成</div>
                <div class="module-view set-box" @click="previewClick(item)">预览</div>
              </div>
            </div>
            <div class="module-name" :title="item.qkLwName">{{ item.qkLwName }}</div>
          </div>
        </template>
      </div>
    </template>
    <!--生成格式-->
    <template v-if="activeStep === 2">
      <div class="create-icon">
        <img src="@/assets/images/formatPaper/lookFormat.png" alt="" />
      </div>
      <div class="look-success">
        <img src="@/assets/images/formatPaper/lookSuccess.png" alt="" />
      </div>
      <div class="download-btn" @click="lookHandle">立即查看</div>
    </template>
  </FormatLayout>
  <FormatPreview
    v-if="showPreviewDialog"
    :data="previewData"
    @close="showPreviewDialog = false"
    @format-set="(item) => formatHandle(item)"
  />
</template>

<style scoped lang="less">
@import '@/styles/formatCommon.less';
@import './formatPaper.less';
</style>
